<html>
<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />	
		
<script type='text/javascript' src='openlayers/OpenLayers.js'></script>
<script type='text/javascript' src='http://www.openlayers.org/api/OpenLayers.js'></script>
<script type='text/javascript' src="proj4js/lib/proj4js-combined.js"></script>
<script type='text/javascript' src='http://www.openstreetmap.org/openlayers/OpenStreetMap.js'></script>
<script type='text/javascript' src='http://www.free-map.org.uk/javascript/ezol.js'></script>
<script type="text/javascript" src="jquery/jquery-1.6.1.js"></script>
<script type='text/javascript'>

$(function(){
	//When the button with an id of submit is clicked (the submit button)
	$("#submit").click(function(){
	
	//Retrieve the contents of the textarea (the content)
	var formvalue1 = $("#singleOutput1").val();
	
	//Build the URL that we will send
	var url = 'submit=1&singleOutput1=' + escape(formvalue1) ;
	
	//Use jQuery's ajax function to send it
	 $.ajax({
	   type: "POST",
	   url: "testProcess.php",
	   data: url,
	   success: function(){
	
	//If successful , notify the user that it was added
	   $("#msg").html("<p class='add'>You just added: <i>" + formvalue1 + "</i></p>");
	   $("#singleOutput1").val('');
	   }
	 });
	
	//We return false so when the button is clicked, it doesn't follow the action
	return false;
		});

	});


	OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {               
	                defaultHandlerOptions: {
	                    'single': true,
	                    'double': false,
	                    'pixelTolerance': 0,
	                    'stopSingle': false,
	                    'stopDouble': false
	                },

	                initialize: function(options) {
	                    this.handlerOptions = OpenLayers.Util.extend(
	                        {}, this.defaultHandlerOptions
	                    );
	                    OpenLayers.Control.prototype.initialize.apply(
	                        this, arguments
	                    ); 
	                    this.handler = new OpenLayers.Handler.Click(
	                        this, {
	                            'click': this.onClick
	                        }, this.handlerOptions
	                    );
	                }, 
	
	                onClick: function(e) {	  
	                	var output1 = document.getElementById(key + "Output1");
						//var output2 = document.getElementById(key + "Output2");	
                    
						var xy = map.getLonLatFromViewPortPx(e.xy);
								
						var lonlat = xy.transform(map.projection, map.displayProjection);
								
						var Longitude = lonlat.lon;
						//var Latitude = lonlat.lat;
		                                
						output1.value = "";
						//output2.value = "";
		
						output1.value = output1.value + Longitude;
						//output2.value = output2.value + Latitude;
						   }
	
	            });


	var map, controls;
	var key = "single";
	
	function init()
	{
		map = new OpenLayers.Map("mapdiv", {
			controls:[
				new OpenLayers.Control.Navigation(),
				new OpenLayers.Control.PanZoomBar(),
				new OpenLayers.Control.LayerSwitcher(),
				new OpenLayers.Control.Attribution()],
			numZoomLevels: 14,
			units: 'mi',
			projection: new OpenLayers.Projection("EPSG:900913"),
			displayProjection: new OpenLayers.Projection("EPSG:4326")
		});
		
		map.addLayer(new OpenLayers.Layer.OSM());
		
		//Set start centerpoint and zoom    
		var lonLat = new OpenLayers.LonLat(121.047, 14.390).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
		var zoom=14;
		map.setCenter (lonLat, zoom);  
		
		
		var click = new OpenLayers.Control.Click();
	    map.addControl(click);
		click.activate();
		
		var output1 = document.getElementById(key + "Output1");
        output1.value = "";
        
	}
	
</script>
</head>
<body onload="init()">
<div id="mapdiv"></div>
	<div id="east">
		<table>
			<tr>
			<form id="form" action="testProcess.php" method="post">
				<td>Longitude:<input type="text" id="singleOutput1" class="output1"></td>
				<!-- <td>Latitude:<input type="text" id="singleOutput2" class="output1"></td> -->
				<td><input type="submit" id="submit" value="Submit"></td>
				</form>	
			</tr>
			<tr>
			<td><div class="msg" id="msg"> </div></td>
			<tr>
		
		</table>
	</div>
</body>
</html>	